<div class="grid grid--no-gutters image-bar image-bar--{{ section.settings.section_height }}">
  {% case section.blocks.size %}
    {% when 1 %}
      {%- assign column_size = '' -%}
    {% when 2 %}
      {%- assign column_size = 'medium-up--one-half' -%}
    {% when 3 %}
      {%- assign column_size = 'medium-up--one-third' -%}
    {% else %}
      {%- assign column_size = 'medium-up--one-quarter' -%}
  {% endcase %}

  {% for block in section.blocks %}
    <div class="grid__item {{ column_size }} js" {{ block.shopify_attributes }}>
      {% if block.settings.link != blank %}
        <a class="image-bar__link" href="{{ block.settings.link }}">
          <div class="image-bar__item box ratio-container lazyload"
               data-bgset="{% include 'bgset', image: block.settings.image %}"
               data-sizes="auto"
               data-parent-fit="cover"
               style="background-position: {{ block.settings.alignment }}; background-image: url('{{ block.settings.image | img_url: '300x300' }});">
      {% elsif block.settings.image != blank %}
        <div class="image-bar__item image-bar__item--{{ block.id }} box ratio-container lazyload"
             data-bgset="{% include 'bgset', image: block.settings.image %}"
             data-sizes="auto"
             data-parent-fit="cover"
             style="background-position: {{ block.settings.alignment }}; background-image: url('{{ block.settings.image | img_url: '300x300' }});">
      {% else %}
        <div class="image-bar__item">
      {% endif %}
      <div class="image-bar__content{% if block.settings.cta_label != blank or block.settings.link != blank %} image-bar__overlay{% endif %}">
        {% if block.settings.image == blank %}
          {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
        {% endif %}

        {% if block.settings.cta_label != blank %}
          <div class="image-bar__text">
            <h3 class="image-bar__caption">{{ block.settings.cta_label | escape }}</h3>
          </div>
        {% endif %}
      </div>
      {% if block.settings.link != blank %}
        </div></a>
      {% else %}
        </div>
      {% endif %}
    </div>
    <noscript>
      <div class="grid__item {{ column_size }}" {{ block.shopify_attributes }}>
        <div class="image-bar__item image-bar__item--{{ block.id }}" style="background-image: url({{ block.settings.image | img_url: '2048x' }});"></div>
      </div>
    </noscript>
  {% endfor %}
</div>

{% if section.blocks.size == 0 %}
  {% include 'no-blocks' %}
{% endif %}



{% schema %}
{
  "name": {
    "da": "Galleri",
    "de": "Galerie",
    "en": "Gallery",
    "es": "Galería",
    "fi": "Galleria",
    "fr": "Galerie",
    "hi": "गैलरी",
    "it": "Galleria",
    "ja": "ギャラリー",
    "ko": "갤러리",
    "ms": "Galeri",
    "nb": "Galleri",
    "nl": "Galerie",
    "pt-BR": "Galeria",
    "pt-PT": "Galeria",
    "sv": "Galleri",
    "th": "แกลเลอรี",
    "zh-CN": "图库",
    "zh-TW": "圖庫"
  },
  "class": "index-section index-section--flush",
  "max_blocks": 4,
  "settings": [
    {
      "type": "select",
      "id": "section_height",
      "label": {
        "da": "Højde på afsnit",
        "de": "Bereichs-Höhe",
        "en": "Section height",
        "es": "Altura de la sección",
        "fi": "Osan korkeus",
        "fr": "Hauteur de la section",
        "hi": "सेक्शन की ऊंचाई",
        "it": "Altezza sezione",
        "ja": "セクションの高さ",
        "ko": "섹션 높이",
        "ms": "Ketinggian bahagian",
        "nb": "Høyde på del",
        "nl": "Sectiehoogte",
        "pt-BR": "Altura da seção",
        "pt-PT": "Altura da secção",
        "sv": "Sektionshöjd",
        "th": "ความสูงของส่วน",
        "zh-CN": "分区高度",
        "zh-TW": "區塊高度"
      },
      "default": "medium",
      "options": [
        {
          "label": {
            "da": "Ekstra lille",
            "de": "Extra klein",
            "en": "Extra Small",
            "es": "Extra pequeña",
            "fi": "Erikoispieni",
            "fr": "Très petite",
            "hi": "अतिरिक्त छोटा",
            "it": "Molto piccola",
            "ja": "極小",
            "ko": "특소",
            "ms": "Lebih Kecil",
            "nb": "Ekstra liten",
            "nl": "Extra klein",
            "pt-BR": "Muito pequeno",
            "pt-PT": "Extra pequeno",
            "sv": "Extra liten",
            "th": "ขนาดเล็กพิเศษ",
            "zh-CN": "特小",
            "zh-TW": "超小型"
          },
          "value": "x-small"
        },
        {
          "label": {
            "da": "Lille",
            "de": "Klein",
            "en": "Small",
            "es": "Pequeña",
            "fi": "Pieni",
            "fr": "Petite",
            "hi": "छोटा",
            "it": "Piccolo",
            "ja": "小",
            "ko": "스몰",
            "ms": "Kecil",
            "nb": "Liten",
            "nl": "Klein",
            "pt-BR": "Pequeno",
            "pt-PT": "Pequeno",
            "sv": "Liten",
            "th": "เล็ก",
            "zh-CN": "小",
            "zh-TW": "小型"
          },
          "value": "small"
        },
        {
          "label": {
            "da": "Medium",
            "de": "Mittel",
            "en": "Medium",
            "es": "Mediana",
            "fi": "Keskisuuri",
            "fr": "Moyenne",
            "hi": "मध्यम",
            "it": "Medio",
            "ja": "中",
            "ko": "보통",
            "ms": "Sederhana",
            "nb": "Middels",
            "nl": "Gemiddeld",
            "pt-BR": "Médio",
            "pt-PT": "Médio",
            "sv": "Medium",
            "th": "ปานกลาง",
            "zh-CN": "中等",
            "zh-TW": "中等"
          },
          "value": "medium"
        },
        {
          "label": {
            "da": "Stor",
            "de": "Groß",
            "en": "Large",
            "es": "Grande",
            "fi": "Suuri",
            "fr": "Grande",
            "hi": "बड़ा",
            "it": "Grande",
            "ja": "大",
            "ko": "라지",
            "ms": "Besar",
            "nb": "Stor",
            "nl": "Groot",
            "pt-BR": "Grande",
            "pt-PT": "Grande",
            "sv": "Stor",
            "th": "ใหญ่",
            "zh-CN": "大",
            "zh-TW": "大型"
          },
          "value": "large"
        },
        {
          "label": {
            "da": "Ekstra stor",
            "de": "Extra groß",
            "en": "Extra Large",
            "es": "Extra grande",
            "fi": "Erikoissuuri",
            "fr": "Très grande",
            "hi": "अतिरिक्त बड़ा",
            "it": "Molto grande",
            "ja": "特大",
            "ko": "특대",
            "ms": "Lebih Besar",
            "nb": "Ekstra stort",
            "nl": "Extra groot",
            "pt-BR": "Muito grande",
            "pt-PT": "Extra grande",
            "sv": "Extra stor",
            "th": "ขนาดใหญ่พิเศษ",
            "zh-CN": "特大",
            "zh-TW": "超大型"
          },
          "value": "x-large"
        }
      ]
    }
  ],
  "blocks": [
    {
      "type": "image",
      "name": {
        "da": "Billede",
        "de": "Foto",
        "en": "Image",
        "es": "Imagen",
        "fi": "Kuva",
        "fr": "Image",
        "hi": "इमेज",
        "it": "Immagine",
        "ja": "画像",
        "ko": "이미지",
        "ms": "Imej",
        "nb": "Bilde",
        "nl": "Afbeelding",
        "pt-BR": "Imagem",
        "pt-PT": "Imagem",
        "sv": "Bild",
        "th": "รูปภาพ",
        "zh-CN": "图片",
        "zh-TW": "圖片"
      },
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": {
            "da": "Billede",
            "de": "Foto",
            "en": "Image",
            "es": "Imagen",
            "fi": "Kuva",
            "fr": "Image",
            "hi": "इमेज",
            "it": "Immagine",
            "ja": "画像",
            "ko": "이미지",
            "ms": "Imej",
            "nb": "Bilde",
            "nl": "Afbeelding",
            "pt-BR": "Imagem",
            "pt-PT": "Imagem",
            "sv": "Bild",
            "th": "รูปภาพ",
            "zh-CN": "图片",
            "zh-TW": "圖片"
          }
        },
        {
          "type": "select",
          "id": "alignment",
          "label": {
            "da": "Justering af billede",
            "de": "Fotoausrichtung",
            "en": "Image alignment",
            "es": "Alineación de imagen",
            "fi": "Kuvan tasaus",
            "fr": "Alignement de l'image",
            "hi": "इमेज पंक्तिबद्ध करना",
            "it": "Allineamento immagine",
            "ja": "画像アラインメント",
            "ko": "이미지 정렬",
            "ms": "Penjajaran imej",
            "nb": "Bildejustering",
            "nl": "Afbeelding uitlijnen",
            "pt-BR": "Alinhamento da imagem",
            "pt-PT": "Alinhamento da imagem",
            "sv": "Bildjustering",
            "th": "การจัดวางรูปภาพ",
            "zh-CN": "图片对齐方式",
            "zh-TW": "圖片對齊"
          },
          "default": "center",
          "options": [
            {
              "value": "top",
              "label": {
                "da": "Top",
                "de": "Oben",
                "en": "Top",
                "es": "Superior",
                "fi": "Ylös",
                "fr": "Haut",
                "hi": "सबसे ऊपर",
                "it": "Alto",
                "ja": "上",
                "ko": "위쪽",
                "ms": "Atas",
                "nb": "Topp",
                "nl": "Boven",
                "pt-BR": "Acima",
                "pt-PT": "Acima",
                "sv": "Högst upp",
                "th": "ด้านบน",
                "zh-CN": "顶部",
                "zh-TW": "頂部"
              }
            },
            {
              "value": "center",
              "label": {
                "da": "I midten",
                "de": "Mitte",
                "en": "Middle",
                "es": "Centrada",
                "fi": "Keskelle",
                "fr": "Milieu",
                "hi": "मध्य में",
                "it": "Centrale",
                "ja": "中央",
                "ko": "중간",
                "ms": "Tengah",
                "nb": "Midten",
                "nl": "Midden",
                "pt-BR": "Meio",
                "pt-PT": "Meio",
                "sv": "Mitten",
                "th": "ตรงกลาง",
                "zh-CN": "中间",
                "zh-TW": "中央"
              }
            },
            {
              "value": "bottom",
              "label": {
                "da": "Bund",
                "de": "Unten",
                "en": "Bottom",
                "es": "Inferior",
                "fi": "Alas",
                "fr": "Bas",
                "hi": "नीचे का",
                "it": "Basso",
                "ja": "下",
                "ko": "아래쪽",
                "ms": "Bawah",
                "nb": "Bunn",
                "nl": "Onder",
                "pt-BR": "Abaixo",
                "pt-PT": "Abaixo",
                "sv": "Längst ner",
                "th": "ด้านล่าง",
                "zh-CN": "底部",
                "zh-TW": "底部"
              }
            }
          ]
        },
        {
          "type": "url",
          "id": "link",
          "label": {
            "da": "Link",
            "de": "Link",
            "en": "Link",
            "es": "Enlace",
            "fi": "Linkki",
            "fr": "Lien",
            "hi": "लिंक",
            "it": "Link",
            "ja": "リンク",
            "ko": "링크",
            "ms": "Pautan",
            "nb": "Kobling",
            "nl": "Link",
            "pt-BR": "Link",
            "pt-PT": "Ligação",
            "sv": "Länk",
            "th": "ลิงก์",
            "zh-CN": "链接",
            "zh-TW": "連結"
          },
          "info": {
            "da": "Valgfri",
            "de": "Optional",
            "en": "Optional",
            "es": "Opcional",
            "fi": "Valinnainen",
            "fr": "Facultatif",
            "hi": "वैकल्पिक",
            "it": "Facoltativo",
            "ja": "オプション",
            "ko": "선택 사항",
            "ms": "Opsyenal",
            "nb": "Valgfritt",
            "nl": "Optioneel",
            "pt-BR": "Opcional",
            "pt-PT": "Opcional",
            "sv": "Valfritt",
            "th": "ไม่จำเป็น",
            "zh-CN": "可选",
            "zh-TW": "(選填)"
          }
        },
        {
          "type": "text",
          "id": "cta_label",
          "label": {
            "da": "Billedtekst",
            "de": "Unterschrift",
            "en": "Caption",
            "es": "Leyenda",
            "fi": "Kuvateksti",
            "fr": "Légende",
            "hi": "कैप्शन",
            "it": "Didascalia",
            "ja": "キャプション",
            "ko": "캡션",
            "ms": "Kapsyen",
            "nb": "Bildetekst",
            "nl": "Bijschrift",
            "pt-BR": "Legenda",
            "pt-PT": "Legenda",
            "sv": "Rubrik",
            "th": "คำบรรยาย",
            "zh-CN": "字幕",
            "zh-TW": "說明"
          }
        }
      ]
    }
  ],
  "presets": [
    {
      "name": {
        "da": "Galleri",
        "de": "Galerie",
        "en": "Gallery",
        "es": "Galería",
        "fi": "Galleria",
        "fr": "Galerie",
        "hi": "गैलरी",
        "it": "Galleria",
        "ja": "ギャラリー",
        "ko": "갤러리",
        "ms": "Galeri",
        "nb": "Galleri",
        "nl": "Galerie",
        "pt-BR": "Galeria",
        "pt-PT": "Galeria",
        "sv": "Galleri",
        "th": "แกลเลอรี",
        "zh-CN": "图库",
        "zh-TW": "圖庫"
      },
      "category": {
        "da": "Billede",
        "de": "Foto",
        "en": "Image",
        "es": "Imagen",
        "fi": "Kuva",
        "fr": "Image",
        "hi": "इमेज",
        "it": "Immagine",
        "ja": "画像",
        "ko": "이미지",
        "ms": "Imej",
        "nb": "Bilde",
        "nl": "Afbeelding",
        "pt-BR": "Imagem",
        "pt-PT": "Imagem",
        "sv": "Bild",
        "th": "รูปภาพ",
        "zh-CN": "图片",
        "zh-TW": "圖片"
      },
      "blocks": [
        {
          "type": "image"
        },
        {
          "type": "image"
        },
        {
          "type": "image"
        }
      ]
    }
  ]
}
{% endschema %}
